<template>
	<div class="sider">
		<div class="sider-header">
			<slot></slot>
		</div>
		<ul class="sider-content">
			<li class="sider-item" :class="{ 'sider-no-bottom': index === products.length - 1 }" v-for="(item, index) in products" :key="index">
				<div class="sider-item-img">
          <router-link :to="{path: '/Detail', query: {goodsId: item.id}}" target="_blank">
					  <img v-lazy="item.icon1" :title="item.goods_name" :alt="item.goods_name" imgtype='recommend'/>
          </router-link>
				</div>
				<div class="sider-item-title">
          <router-link :to="{path: '/Detail', query: {goodsId: item.id}}" target="_blank">
					  {{ item.goods_name }} {{ item.type_name }} {{ item.sx_name }}
          </router-link>
				</div>
				<div class="sider-item-period" v-if="item.base_price > 200">
          {{ $t('message.currencySymbol') }}<span>{{ item.staging_price	 }}</span>x{{ item.stages }}{{$t('message.time')}}
				</div>
        <div class="sider-item-period" v-else>
          {{ $t('message.currencySymbol') }}<span>{{ item.base_price	 }}</span>
        </div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
  name: 'VSider',
  props: {
    products: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.sider-header {
	height: 46px;
	line-height: 46px;
	border: 1px solid #e6e6e6;
	background-color: #f8f8f8;
	padding-left: 31px;
	font-weight: bold;
	position: relative;
}

.sider-header:before {
	content: '';
	display: block;
	width: 4px;
	height: 16px;
	background-color: #ff600a;
	position: absolute;
	top: 15px;
	left: 15px;

}

.sider-content {
	border: 1px solid #e6e6e6;
	border-top: 0;
	padding: 0 15px;
}

.sider-item {
	padding: 16px 0;
	border-bottom: 1px solid #e6e6e6;
}

.sider-content .sider-no-bottom {
	border-bottom: 0;
}

.sider-item-img {
	width: 120px;
	height: 120px;
	margin: 0 auto;
}

.sider-item-img img {
	width: 100%;
	height: 100%;
}

.sider-item-title {
	height: 34px;
	line-height: 17px;
	font-size: 12px;
	margin-top: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sider-item-title a {
  color: #333
}
.sider-item-title a:hover{
  color: #ff600a;
  text-decoration: underline;
}

.sider-item-period {
	height: 17px;
	line-height: 17px;
	color: #ff600a;
	font-size: 12px;
  margin-top: 15px;
}

.sider-item-period span {
	font-size: 16px;
	padding: 0 4px 0 2px;
}
</style>
